<script>
import { useVModel } from "@vueuse/core";
import { provide } from "vue";
export default {
  name: "XTabs",
  props: {
    modelValue: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props, { emit }) {
    const activeName = useVModel(props, "modelValue", emit);
    provide("activeName", activeName);

    //点击改值
    const tabClick = (name, index) => {
      //单纯的作为父组件变值通知，当前组件本质不会改变
      activeName.value = name;
      //提供事件供触发
      emit("tabClick", { name, index });
      // console.log(activeName.value,name);
    };
    return { activeName, tabClick };
  },
  render() {
    //获取插槽
    const items = this.$slots.default();
    // console.log(items);
    //动态节点，有可能用这个组件的时候使用的是v-for生成的节点，这样需要转换
    const dynamicItems = [];
    items.forEach((item) => {
      if (item.type.name) {
        dynamicItems.push(item);
      } else {
          item.children.forEach((item) => {
            dynamicItems.push(item);
          });
      }
    });
    // 1. 动态插值表达式{} 2. 尽量三元表示式做判断，使用map来遍历 3.事件使用原始方式绑定
    const nav = (
      <nav>
        {dynamicItems.map((item, i) => {
          return (
            <a
              href="javascript:;"
              class={{ active: item.props.name === this.activeName }}
              //直接写函数会立即调用，写成函数形式，触发才调用
              onClick={() => this.tabClick(item.props.name, i)}
            >
              {item.props.label}
            </a>
          );
        })}
      </nav>
    );

    return <div class="xtx-tabs">{[nav, dynamicItems]}</div>;
  },
};
</script>

<style lang="less" scoped>
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>